<template>
	<kb-layout :title="title"> 
	
	 <view class="navs u-flex">
		 
		 <view class="search u-padding-20">
		 	<up-search v-model="keyword" :clearabled="true" actionText="搜索" :showAction="true"
		 		height="30" searchIconSize="22" @custom="onKeyword" @search="onKeyword"
		 		:animation="true"></up-search>
		 </view>
		 
		 <view class="search-list">
		 	<view class="navs-left">
				
		 		<view class="cate " v-for="(item,index) in cate1" :key="index"
				 @tap="navCate(item,index)"
				 :class="[index==currentCateIndex && 'active']"
				 >
					<view class="tra"> <text></text></view>
		 			<view class="name  u-line-1">
		 				<text>{{ item.title }}</text>
						<image class="henxian" src="../../static/henxian.png"></image>
		 			</view>
					<view class="bra"> <text></text></view>					
		 		</view>
				 
				
		 	</view>
		 	<view class="navs-right u-padding-30">
				
				 <CateList v-if="subcate" :list="subcate" @change="changeCate"></CateList>
				 
				 <!-- <view class="cate-goods-box"> -->
				 <CateGood :pid='currentCateId' :subcate="subcate" :currentCate="currentCate"></CateGood>
				 
		 	</view>
		 
			
		 </view>
		 
		
	 </view>
	</kb-layout>
</template>

<script>
	import GoodItem from "../mall/componets/good-item.vue";
	import CateList from "../mall/componets/cate-list.vue";
	import CateGood from "../mall/componets/cate-good.vue";
	import {
		getBiwanPage,
		getSuggestGoodsList,
		getGoodsCategory,
	 }  from "@/common/api.js";
	 
	export default {
		components:{
			GoodItem,
			CateList,
			CateGood,
		},
		name:"pageMall",
		props:{
			title: {
				Type: String,
				default: ''
			}
		},
		data() {
			return {
				keyword:"",
				cate1:[], //左侧分类列表
				cate2: {}, //全部右侧的子分类
				goods: [],
				currentCateIndex: 0, //当前左侧的分类一级选中第几个
				currentCateId:0, //当前的一级分类ID
				subcate:[
					// {name: '门票',id: 1 },
					// {name: '夜宿体验',id: 2 },
					// {name: '成人票',id: 3 },
					// {name: '研学大本营',id: 4 },
				], //当前一级分类下的子分类
				scrollTop : 0,
				currentTop: 0,
				currentCate: undefined,
			}
		},
		methods: {
			onKeyword () {},
			fetchData() {
				getSuggestGoodsList().then( ret =>  this.goods = ret.data)	
				getGoodsCategory().then((ret)=> {
					 this.cate1 = ret.cate1;
					 this.cate2 = ret.cate2
					 let index = this.currentCateIndex;
					 let indexCate = this.cate1[index];
					 if(indexCate){
						 this.currentCateId = indexCate.id;
						 this.subcate = ret.cate2[ indexCate.id] ;
					 }
						
				})
			},
			/*滚动商品到对应分类*/
			changeCate(item ){
				this.currentCate = item;
			  
			}, 
			navCate(cate, index){
				this.currentCateIndex = index;
				//if(this.cate2[cate.id]){
					this.currentCateId = cate.id;
					this.subcate = this.cate2[cate.id] 
				//}
			}
		},
		mounted() {
			this.fetchData();
		}
	}
</script>

<style lang="scss">
.navs{
	display: flex;
	flex-direction: column;
 
	
	.search{
		height: 40px;
		background-color: #fff;
		border-bottom: #f2f2f2 1px solid;
	}
	.search-list{
		 display: flex;
		 height: calc(100vh - 160px);
	}
	
	.navs-left{
		width: 6rem;		
		background-color: #F2F2F2;
		overflow-x: hidden;
		overflow-y: auto;
		color: #B3B3B3;
	}
	.navs-right{
		flex:1;
		background-color: #fff;
		
		display: flex;
		flex-direction: column;
		
		.cate-goods{
			overflow-y: auto;			
			flex: 1;
			padding-top: 20px;
			 
		}
	 
		
	}
	.cate{
		text-align: center;
		height: 3.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px; 
		
		.name{
			position: relative;
			
			.henxian{
				position: absolute;
				left:  0;
				bottom: -5px;
				height: 15px;
				width: 130px;
				object-fit: cover;
				display: none;
			}
		}
	}
	
	.active{
		background-color: #fff;
		position: relative; 
		font-weight: 900; 
		z-index: 1;
		font-size: 16px;
		color: #2F2F2F;
		
		.name .henxian{
			display: block;
		}

		.tra{
			position: absolute;
			top: -40rpx;
			right: 0rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: #f5f5f5;
			border-bottom-right-radius: 30rpx;
			text{
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				height: 100%;
				display: inline-block;
				background-color: #fff;
				z-index: -1;
			}
			 
		}
		.bra{
			position: absolute;
			bottom: -40rpx;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			background-color: #f5f5f5;
			border-top-right-radius: 30rpx;
			text{
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				height: 100%;
				display: inline-block;
				background-color: #fff;
				z-index: -1;
			}

		}

	 
	}

	 
}
</style>
